<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>资源搜索平台</title>
    <style>
        /* 全局毛玻璃主题样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            color: #f5f5f5;
            list-style: none;
        }

        body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            background: linear-gradient(150deg, #1a1c28, #2c2f42);
            background-attachment: fixed;
            line-height: 1.6;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 40px auto;
            padding: 30px 40px;
            background: rgba(26, 28, 40, 0.85);
            border-radius: 30px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
        }

        /* 搜索模块样式 */
        .search-section {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 40px;
        }

        .search-input {
            flex-grow: 1;
            padding: 16px 30px;
            border: 2px solid rgba(255, 255, 255, 0.15);
            border-radius: 50px;
            background: rgba(52, 55, 71, 0.7);
            font-size: 18px;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .search-input:focus {
            outline: none;
            border-color: #7683f8;
            box-shadow: 0 0 20px rgba(118, 131, 248, 0.3);
        }

        .search-btn {
            padding: 16px 40px;
            border: none;
            border-radius: 50px;
            background: #7683f8;
            color: white;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.3s ease;
        }

        .search-btn:hover {
            box-shadow: 0 0 30px rgba(118, 131, 248, 0.4);
            transform: scale(1.02);
        }

        /* 数据表格模块样式 */
        .table-section {
            width: 100%;
            background: rgba(52, 55, 71, 0.7);
            border-radius: 25px;
            overflow: hidden;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
        }

        .data-table th,
        .data-table td {
            padding: 20px 30px;
            text-align: left;
        }

        .data-table th {
            background: rgba(76, 85, 126, 0.9);
            font-weight: 500;
            font-size: 17px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
        }

        .data-table tbody tr {
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .data-table tbody tr:hover {
            background: rgba(76, 85, 126, 0.3);
        }

        .url-content {
            white-space: pre-line;
            color: #a5b0f2;
            font-size: 16px;
        }

        /* 分页模块样式 */
        .pagination-section {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            margin: 30px 0 10px;
            font-size: 17px;
        }

        .page-btn {
            padding: 12px 25px;
            border: 2px solid rgba(255, 255, 255, 0.15);
            border-radius: 30px;
            background: rgba(52, 55, 71, 0.7);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .page-btn.active {
            background: #7683f8;
            border-color: #7683f8;
            color: white;
            font-weight: 600;
            box-shadow: 0 0 15px rgba(118, 131, 248, 0.3);
        }

        .page-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 搜索模块 -->
        <div class="search-section">
            <input type="text" id="searchInput" class="search-input" placeholder="请输入搜索关键词（如：臣本布衣）">
            <button id="searchBtn" class="search-btn">立即搜索</button>
        </div>

        <!-- 数据表格模块 -->
        <div class="table-section">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>资源标题</th>
                        <th>下载信息</th>
                    </tr>
                </thead>
                <tbody id="tableBody"></tbody>
            </table>
        </div>

        <!-- 分页模块 -->
        <div class="pagination-section" id="paginationSection">
            <button id="prevBtn" class="page-btn" disabled>上一页</button>
            <span id="pageInfo">第 <span id="currentPageNum">1</span> 页 / 共 <span id="totalPageNum">1</span> 页</span>
            <button id="nextBtn" class="page-btn" disabled>下一页</button>
        </div>
    </div>

    <script>
        // 全局变量
        let allData = []; // 存储所有搜索结果
        const pageSize = 10; // 每页显示数量
        let currentPage = 1; // 当前页码

        // 搜索功能
        async function handleSearch() {
            const keyword = document.getElementById('searchInput').value.trim();
            if (!keyword) return;

            try {
                // 显示加载状态（可扩展）
                const response = await fetch(`https://v2.xxapi.cn/api/duanjusearch?search=${encodeURIComponent(keyword)}`);
                const result = await response.json();

                if (result.code === 200) {
                    allData = result.data; // 保存所有数据
                    updatePaginationStatus(); // 更新分页状态
                    renderCurrentPageData(); // 渲染当前页数据
                } else {
                    alert('搜索失败：' + result.msg);
                }
            } catch (error) {
                console.error('网络请求失败', error);
                alert('网络请求失败，请检查网络连接');
            }
        }

        // 分页控制
        function updatePaginationStatus() {
            const totalData = allData.length;
            const totalPages = Math.ceil(totalData / pageSize);
            
            document.getElementById('totalPageNum').textContent = totalPages;
            currentPage = Math.min(currentPage, totalPages); // 防止页码越界
            document.getElementById('currentPageNum').textContent = currentPage;

            // 按钮状态控制
            document.getElementById('prevBtn').disabled = currentPage === 1;
            document.getElementById('nextBtn').disabled = currentPage === totalPages;
            // 显示分页模块（数据不足一页时隐藏）
            document.getElementById('paginationSection').style.display = totalData > pageSize ? 'flex' : 'none';
        }

        // 渲染当前页数据
        function renderCurrentPageData() {
            const start = (currentPage - 1) * pageSize;
            const end = start + pageSize;
            const currentData = allData.slice(start, end);
            const tableBody = document.getElementById('tableBody');

            tableBody.innerHTML = currentData.map(item => `
                <tr>
                    <td>${item.title}</td>
                    <td class="url-content">${item.url.replace(/\n/g, '<br>')}</td>
                </tr>
            `).join('');
        }

        // 上一页/下一页点击事件
        function handlePageChange(direction) {
            currentPage = direction === 'prev' ? currentPage - 1 : currentPage + 1;
            updatePaginationStatus();
            renderCurrentPageData();
        }

        // 事件绑定
        document.getElementById('searchBtn').addEventListener('click', handleSearch);
        document.getElementById('searchInput').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') handleSearch();
        });
        document.getElementById('prevBtn').addEventListener('click', () => handlePageChange('prev'));
        document.getElementById('nextBtn').addEventListener('click', () => handlePageChange('next'));

        // 初始化隐藏分页模块
        document.getElementById('paginationSection').style.display = 'none';
    </script>
</body>
</html>